<template>
    <div class="app-container">
      <!--工具栏-->
      <div class="head-container">
        <crudOperation :permission="permission" />
      </div>
      <!--表单组件-->
      <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="图片" prop="path">
            <el-upload
              class="avatar-uploader"
              action="/api/common/back/file"
              name="upfile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="form.path" :src="form.path" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="链接地址" prop="href">
            <el-input v-model="form.href" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="排序值" prop="sort">
            <el-input v-model="form.sort" type="number" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column label="图片">
          <template slot-scope="scope">
            <img class="m-image" :src="scope.row.path" @click="viewImage(scope)"/>
          </template>
        </el-table-column>
        <el-table-column label="所属代理商" align="center">
          <template slot-scope="scope">
            {{scope.row.agent}}
          </template>
        </el-table-column>
        <el-table-column label="链接地址" align="center">
          <template slot-scope="scope">
            {{scope.row.href}}
          </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <template slot-scope="scope">
            <el-switch @change="changeStatus(scope.row.id)"
                       v-model="scope.row.enable"
                       active-color="#13ce66"
                       inactive-color="#dcdfe6">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="排序值" align="center" width="70">
          <template slot-scope="scope">
            {{scope.row.sort}}
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
      <imageViewer v-if="viewDialog" :imgList="viewImages" :index="viewIndex" @closeView="closeView"></imageViewer>
    </div>
</template>

<script>
    import CRUD, { presenter,form } from '@crud/crud'
    import crudOperation from '@crud/CRUD.operation'
    import pagination from '@crud/Pagination'
    import udOperation from '@crud/UD.operation'
    import crudCarousel from '@/api/operation/carousel'
    import imageViewer from '@/components/image-viewer'

    // crud交由presenter持有
    const crud = CRUD({
        title: '轮播图',
        crudMethod: { ...crudCarousel },
        url: 'api/product/back/carousel/list',
        sort: ['sort,asc', 'id,desc'],
        optShow: {
            add: true,
            edit: true,
            del: true,
            download: false
        }
    })
    const defaultForm={ href:'',enable:false,sort:0,path:'' }
    export default {
        name: "carousel",
        components:{
            crudOperation,pagination,udOperation,imageViewer
        },
        mixins: [presenter(crud),form(defaultForm)],
        dicts: ['job_status'],
        data(){
            return {
                permission: {
                    add: ['admin', 'job:add'],
                    edit: ['admin', 'job:edit'],
                    del: ['admin', 'job:del']
                },
                rules:{},
                viewDialog:false,
                viewImages:[],
                viewIndex:0
            }
        },
        methods:{
            // 新增与编辑前做的操作
            [CRUD.HOOK.afterToCU](crud, form) {
                if(!form.id){
                    form.enabled = false
                }
            },
            changeStatus(){

            },
            handleAvatarSuccess(res, file) {
                console.log(res)
                this.form.path= res;
            },
            beforeAvatarUpload(file) {
                const isImage = (file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/gif');
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isImage) {
                    this.$message.error('请上传jpg、png或gif!格式图片！');
                }
                if (!isLt2M) {
                    this.$message.error('轮播图大小不能超过 2MB!');
                }
                return isImage && isLt2M;
            },
            viewImage(scope){
                const images=[]
                crud.data.forEach(function (item) {
                    images.push(item.path)
                })
                this.viewImages=images
                this.viewIndex=scope.$index
                this.viewDialog=true
            },
            closeView(){//关闭图片查看器
                this.viewDialog=false
            }
        }
    }
</script>

<style scoped>

  .m-image{
    height: 100px;
    cursor: pointer;
  }
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
